import { Carousel, WingBlank } from 'antd-mobile';
import { NavLink } from 'react-router-dom';
import React, { Component } from 'react';

class Lunbotu extends React.Component {
  state = {
    data: [],
    imgHeight: 150,
    actList: []
  }
  componentDidMount() {
    let url = 'http://154.8.202.56:8081/activity/cha';
        fetch(url, {
        method: 'POST',
        body: JSON.stringify({userid:localStorage.getItem("userid")}),
        headers: {
            "Access-Control-Allow-Origin":"*",
            'content-type': 'application/json'
        },
        mode: 'cors'
        })
        .then(res => res.json())
        .then(res => {this.setState({
            actList: res
        })
      })
        // .then(res => console.log(this.state.actList))
      .then(res => {
          setTimeout(() => {
            this.setState({
              data: this.state.actList
            });
        // console.log(this.state.data)
          }, 3000);
      })
      
  }
  render() {
      
    return (
      
      <WingBlank style={{width:'100%', height:'170px',marginLeft:'0px',touchAction:'pan-y', paddingTop:'0px'}}>
        <Carousel
          autoplay={true}
          infinite={true}
          slideWidth="375px"  
          autoplayInterval={3000}
          slideWidth={1}
        >
          {this.state.data.map((item,idx) => (
            <NavLink key={idx} to={{pathname:'/Activity/:' + item.activityid, state: {item:item}}}>
           
              <img
                src={item.activitypic}
                alt=""
                style={{ width: '100%', height:'170px',verticalAlign: 'top',touchAction: 'pan-y' }}
                
                onLoad={(e) => {
                  window.dispatchEvent(new Event('resize'),{ passive: false });
                  this.setState({ imgHeight: '170px' });
                }
              }
              />
            </NavLink>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}

export default Lunbotu;